<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>table列表页</title>
    <link rel="stylesheet" th:href="@{/resources/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/resources/plugins/bootstrap-table/bootstrap-table.min.css}">
    <link rel="stylesheet" th:href="@{/resources/awi/css/font-awesome.css}">
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">查询参数</div>
                <div class="panel-body">
                    <form id="searchForm" class="form-inline">
                        <div class="col-md-3 form-group">
                            <label>流程名称</label>
                            <input type="text" class="form-control" name="name_">
                        </div>
                        <div class="col-md-3">
                            <div class="btn-group">
                                <button type="button" class="btn btn-success"><i class="fa fa-search"></i>查询</button>
                                <button type="button" class="btn btn-warning"><i class="fa fa-refresh"></i> 重置</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="row" id="toolbar">
        <div class="col-md-12">
            <div class="btn-group">
                <button type="button" class="btn btn-primary" onclick="addNew()"><i class="fa fa-plus"></i>新增</button>
                <button type="button" class="btn btn-danger"><i class="fa fa-remove"></i>删除</button>
                <button type="button" class="btn btn-success"><i class="fa fa-refresh"></i>刷新</button>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <table id="dataTable" data-url="/processSetting/pageList" class="data-table"
                   data-locale="zh-CN" data-pagination="true" data-response-handler="dataTableResponseHandler"
                   data-side-pagination="server" data-toolbar="toolbar"
            >
                <thead>
                <tr>
                    <th data-title="流程名称" data-field="name_" data-align="center" data-valign="middle"></th>
                    <th data-title="版本" data-field="version_" data-align="center" data-valign="middle"></th>
                    <th data-title="描述" data-field="description_" data-align="center" data-valign="middle"></th>
                    <th data-title="操作" data-field="id_" data-align="center" data-valign="middle" data-width="200"
                        data-formatter="opFormatter"></th>
                </tr>
                </thead>

            </table>
        </div>
    </div>
</div>
</body>
<script th:src="@{/resources/plugins/jQuery/jquery-2.2.3.min.js}"></script>
<!-- Bootstrap 3.3.6 -->
<script th:src="@{/resources/bootstrap/js/bootstrap.min.js}"></script>

<!-- Bootstrap 3.3.6 -->
<script th:src="@{/resources/plugins/bootstrap-table/bootstrap-table.min.js}"></script>
<script th:src="@{/resources/plugins/bootstrap-table/bootstrap-table-locale-all.min.js}"></script>
<script th:src="@{/resources/awi/js/app.min.js}"></script>
<script th:src="@{/resources/awi/js/app_iframe.min.js}"></script>

<script th:src="@{/resources/plugins/plugins-init/plugins-init.js}"></script>
<script th:src="@{/resources/layer/layer.js}"></script>
<script type="text/javascript">
    //若需操作tab，如动态添加或删除，需在页面中引入 app.min.js 以及 app_iframe.min.js,调用parent对象的addTabs方法即可。
    function addNew(){
        var index = layer.open({
            title:'流程发布',
            type: 2,
            content: '/processSetting/view/processForm',
            area: ['400px', '300px'],
            maxmin: true
        });
        // layer.full(index);
        // parent.addTabs({
        //     id: '10009',
        //     title: '添加',
        //     close:true,
        //     url: '/processSetting/view/processForm',
        //     urlType: "iframe-tab"
        // });
    }
    function edit(uid){
        parent.addTabs({
            id: '10009',
            title: '编辑',
            close:true,
            url: '/plugins/form',
            urlType: "iframe-tab"
        });
    }
    function opFormatter(value, row, index) {
        var removeBtn = '<button type="button" class="btn btn-danger btn-sm"><i class="fa fa-remove"></i>删除</button>';
        var editBtn = '<button type="button" class="btn btn-primary btn-sm"><i class="fa fa-edit"></i>编辑</button>';
        return '<div class="btn-group">' + removeBtn + editBtn + '</div>';
    }


</script>
</html>